<template>
    <div class="content-main">
        <div class="breadcrumb">
            <div class="breadcrumb-icon">
                <img src="./../../assets/images/breadcrumb_icon.png" />
            </div>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>虚机列表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="content-box">
            <div class="search-box">
                <div class="search-item">
                    <span class="search-title">班级: </span>
                    <el-select
                        v-model="classValue"
                        placeholder="请选择班级"
                        style="float:left;">
                        <el-option
                        v-for="(item, index) in classStatus"
                        :key="index"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="search-item">
                    <span class="search-title">案例: </span>
                    <el-select
                        v-model="projectValue"
                        placeholder="请选择案例"
                        style="float:left;">
                        <el-option
                        v-for="(item, index) in projectStatus"
                        :key="index"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="search-item">
                    <span class="search-title">学生/教师信息: </span>
                    <el-input v-model="info" placeholder="请输入学生/教师信息" style="float:left; width:auto;"></el-input>
                </div>
                <div class="search-item">
                    <el-button type="primary" @click="searchFn">搜索</el-button>
                </div>
                <div class="search-item" style="float:right; margin:0;">
                    <el-button type="primary" @click="deleteList">批量删除</el-button>
                </div>
            </div>
            <div class="table-content" v-loading="tableLoading">
                <el-table
                :data="tableData"
                border
                ref="multipleTable"
                style="width: 100%"
                @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="100px">
                    </el-table-column>
                    <el-table-column prop="userName" label="姓名">
                    </el-table-column>
                    <el-table-column prop="userNumber" label="学号/工号">
                    </el-table-column>
                    <el-table-column label="身份">
                        <template slot-scope="scope">
                            <span v-if="scope.row.roleId == 1">学生</span>
                            <span v-if="scope.row.roleId == 2">教师</span>
                            <span v-if="scope.row.roleId == 3">超级管理员</span>
                            <span v-if="scope.row.roleId == 4">普通管理员</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="className" label="班级">
                    </el-table-column>
                    <el-table-column prop="experimentName" label="案例">
                    </el-table-column>
                    <!-- <el-table-column prop="allocationStatus" label="状态">
                        <template slot-scope="scope">
                            <span v-if="scope.row.allocationStatus == 0">停止</span>
                            <span v-if="scope.row.allocationStatus == 1">运行</span>
                        </template>
                    </el-table-column> -->
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="lookFn(scope.row.experimentId,scope.row.stuorteaId)">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-size="pagesize"
                    layout="total, prev, pager, next, jumper"
                    :total="totalCount"
                    style="margin-top: 20px; text-align: center;">
                </el-pagination>
            </div>
            <el-dialog class="virtual-config-dialog" title="虚机详情" :visible.sync="dialogFormVisible">
                <el-form :model="form" ref="form" label-width="90px">
                    <el-form-item label="姓 名 :" style="width: 50%; float:left;">
                        <el-input type="text" disabled v-model="form.name" style="width: 80%;"></el-input>
                    </el-form-item>
                    <el-form-item label="身 份 :" style="width: 50%; float:left;">
                        <el-input type="text" disabled v-model="form.identity" style="width: 80%;"></el-input>
                    </el-form-item>
                     </el-form-item>
                    <el-form-item label="班 级 :" style="width: 50%; float:left;">
                        <el-input type="text" disabled v-model="form.class" style="width: 80%;"></el-input>
                    </el-form-item>
                    <el-form-item label="工 号 :" style="width: 50%; float:left;">
                        <el-input type="text" disabled v-model="form.jobId" style="width: 80%;"></el-input>
                    </el-form-item>
                    <el-form-item label="案  例 :" style="width: 50%; float:left;">
                        <el-input type="text" disabled v-model="form.project" style="width: 80%;"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="虚机数量 :" style="width: 50%; float:left;">
                        <el-input type="text" disabled v-model="form.virtualNum" style="width: 80%;"></el-input>
                    </el-form-item> -->
                    <!-- <el-form-item label="分配类型 :" style="width: 50%; float:left;">
                        <el-input type="text" disabled v-model="form.type" style="width: 80%;"></el-input>
                    </el-form-item> -->
                </el-form>
                <el-table
                :data="tableData2"
                border
                style="width: 100%">
                    <el-table-column prop="imageName" label="镜像名称">
                    </el-table-column>
                    <el-table-column prop="ip" label="ip地址">
                    </el-table-column>
                    <el-table-column prop="cpu" label="处理器上限">
                    </el-table-column>
                    <el-table-column prop="memory" label="内存上限">
                    </el-table-column>
                    <el-table-column label="类型">
                        <template slot-scope="scope">
                            <span v-if="scope.row.type == 1">教学模式</span>
                            <span v-if="scope.row.type == 4">练习模式</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="状态">
                        <template slot-scope="scope">
                            <span v-if="scope.row.status == 1">运行</span>
                            <span v-if="scope.row.status == 2">停止</span>
                            <span v-if="scope.row.status == 3">正在启动</span>
                            <span v-if="scope.row.status == 4">正在停止</span>
                        </template>
                    </el-table-column>
                </el-table>
                <div slot="footer" class="dialog-footer" style="text-align:center;">
                    <el-button type="primary" @click="closeDialog()">关闭</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import BreadCrumbBack from '@/components/breadCrumbBack.vue'
    export default {
        components: {
            BreadCrumbBack
        },
        data () {
            //手机号验证
            var validPhone = (rule, value,callback)=>{
                if (!value){
                    callback(new Error('请输入电话号码'))
                }else  if (!isvalidPhone(value)){
                    callback(new Error('请输入正确的11位手机号码'))
                }else {
                    callback()
                }
            }
            return {
                projectStatus: [
                    {
                        label: '全部',
                        value: ''
                    }
                ],
                projectValue: '',
                classStatus: [
                    {
                        label: '全部',
                        value: ''
                    }
                ],
                classValue: '',
                info: '',
                tableLoading: false,
                tableData: [],
                currentPage:1,
                pagesize:10,
                totalCount: 1000,
                multipleSelection: [],
                tableData2: [],
                dialogFormVisible: false,
                form: {
                    name: '',
                    identity: '',
                    class: '',
                    jobId: '',
                    project: '',
                    type: '',
                    // virtualNum: ''
                }
            }
        },
        created () {
            this.init()     //初始化
            this.initTable()     //初始化
        },
        methods: {
            init() {
                let self = this
                self.$http.get('/dataplatform/common/search/listClassItem').then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        for(let i = 0; i < res.data.classList.length; i++){
                            let classJson = {}
                            classJson.label = res.data.classList[i].name
                            classJson.value = res.data.classList[i].id
                            self.classStatus.push(classJson)
                        }
                        for(let i = 0; i < res.data.itemList.length; i++){
                            let projectJson = {}
                            projectJson.label = res.data.itemList[i].name
                            projectJson.value = res.data.itemList[i].id
                            self.projectStatus.push(projectJson)
                        }
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            initTable(){
                let self = this
                self.$http.get('/dataplatform/container/list?pageNum='+self.currentPage+'&pagesize='+self.pagesize+'&classId='+self.classValue+'&experimentId='+self.projectValue+'&stuorteaName='+self.info).then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        self.tableData = res.data.list
                        self.totalCount = res.data.total
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //表格分页
			handleSizeChange: function (size) {
				this.pagesize = size;
			},
			handleCurrentChange: function(currentPage) {
                this.currentPage = currentPage
                this.initTable()
            },
            //全选
			handleSelectionChange(val) {
				let valArr = []
				for(let i = 0; i < val.length; i++){
                    let valJson = {}
                    valJson.stuorteaId = val[i].stuorteaId
                    valJson.experimentId = val[i].experimentId
					valArr.push(valJson)
				}
				this.multipleSelection = valArr
            },
            //关闭需继续详情
            closeDialog(formName) {
                let self = this
				self.dialogFormVisible = false
            },
            //删除选中
			deleteList() {
				let self = this;
				if(self.multipleSelection.length == 0){
                    self.$message({
                        message: '请选择要删除的信息',
                        type: 'warning'
                    })
					return
                }
				self.$confirm('是否删除虚拟机?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					self.$http.post('/dataplatform/container/deleteByStuorteaIdAndExperimentId',self.multipleSelection).then((response) => {
						let res = response.data;
						if(res.code == '200'){
                            self.$message({
                                message: '删除成功',
                                type: 'success'
                            })
                            self.currentPage = 1
							self.initTable()
						}else if(res.code == '401'){
                            self.$router.replace({
                                path:'/login'
                            })
                        }else{
                            self.$message.error(res.message)
                        }
					},(err) => {
						console.log('err');
					})
				}).catch(() => {
				});
            },
            //搜索
            searchFn() {
                this.currentPage = 1
                this.initTable()
            },
            //查看
            lookFn(experimentId,stuorteaId) {
                let self = this
                self.dialogFormVisible = true

                self.$http.post('/dataplatform/container/details',{
                    stuorteaId: parseInt(stuorteaId),
                    experimentId: parseInt(experimentId)
                }).then((response) => {
                    let res = response.data
                    if(res.code == '200'){
                        let roleText,
                            typeText,
                            role = res.data.role,
                            type = res.data.isCluster
                        if(role == 1){
                            roleText = '学生'
                        }else if(role == 2){
                            roleText = '教师'
                        }else if(role == 3){
                            roleText = '超级管理员'
                        }else if(role == 4){
                            roleText = '普通管理员'
                        }
                        if(type == 0){
                            typeText = '单机'
                        }else if(type == 1){
                            typeText = '集群'
                        }
                        self.form.name = res.data.userName
                        self.form.identity = roleText
                        self.form.class = res.data.className
                        self.form.jobId = res.data.userNumber
                        self.form.project = res.data.experimentName
                        self.form.type = typeText
                        // self.form.virtualNum = self.tableData2.length == 0 ? '' : self.tableData2.length
                        self.tableData2 = res.data.containerList
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            }
        }
    }
</script>
